<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
    <link rel="stylesheet"  type="text/css" href="/static/layer/theme/default/layer.css">
	<script src="/static/js/jquery-3.2.1.min.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.global.js"></script>
    <script src="/static/layer/layer.js"></script>
    <title>用户注册</title>

</head>
<body>
    {% include 'commonNav.html' %}
	<article>
		<!-- 网站主体 -->
		<div id="main">
			<section class="ct">
				<!-- 上传表单-->
				<div class="upload">
					<h1>用户注册②<em>填写基本信息、完成用户注册第二步</em></h1>
					<!-- 注册步骤导航-->
					<div class="reg_step">
						<a class="step1">注册信息</a><a class="step">基本信息</a><a class="step2">注册完成</a>
					</div>

					<form action="./success.html" id="myform" method="post" autocomplete="off" enctype="multipart/form-data">

						<p class="file">
							<input type="file" name="resource" @change="uploadAvatar">

							<span class="t1" v-if="!isUpload">点击上传用户头像、图片小于5MB</span>
							<!-- 上传后的效果 -->
							<span class="t2" v-else>
								<img :src="file.dataUrl" />
								<b>#{ file.name  }</b>
								<a>重新上传</a>
							</span>
						</p>

						<p>
							<label>出生日期：</label>
							<input id="tel" class="upt" type="date" name="birth" v-model="birthday" value="" />
						</p>

						<p>
							<label>昵称：</label>
							<input id="nickname" class="upt" type="text" name="nickname" value="" v-model.trim="nickname" />
							<b></b>
						</p>

						<p>
							<label>真实姓名：</label>
							<input id="realname" class="upt" type="text" name="realname" value="" v-model.trim="name" />
							<b></b>
						</p>

						<p>
							<label>性别：</label>
							<select name="sex" class="upt" v-model="gender">
								<option value="S">保密</option>
								<option value="M">男</option>
								<option value="F">女</option>
							</select>
						</p>

						<p>
							<a class="btn" @click="confirmRegister">确认完成</a>
                            <!--
							<a class="skip" href="./success.html">跳过该步骤</a>
							-->
						</p>
					</form>
				</div>
			</section>
		</div>
	</article>
	<footer>
		<p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
		<p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
		<p class="num">沪ICP备14048333号</p>
	</footer>

<script>
Vue.createApp({
    data() {
        return {
            file: {
                avatar: null,  // 用户头像
                name: '',  // 文件名字
                size: 0 ,  // 文件大小
                dataUrl: '', // 文件的dataUrl
            },
            uploaded: false, // 用来标记是否上传头像成功
            birthday: '',
            nickname: '',
            name: '',
            gender: 'S',
        }
    },
    delimiters: ['#{', '}'],
    methods: {
        uploadAvatar(event) {
            const file = event.target.files[0];
            // 获取 上传的头像
            this.file.avatar = file ;
            // 获取文件名字
            this.file.name = file.name ;
            this.file.size = file.size ;

            // 生成文件的dataUrl
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (e) => {
                this.file.dataUrl = e.target.result ;
            };
            const formData = new FormData();
            formData.append("avatar", this.file.avatar);
            formData.append("uid", {{ uid }}) ;
            this.uploaded = false ;
            const index = layer.load(2)
            // 调用 接口、完成 头像的 上传
            axios.post('/upload-avatar', formData).then(ret=> {
                if (ret.data.code === 200) {
                    this.uploaded = true ;
                }
            }).finally(()=> {
                layer.close(index);
            })
        },
        confirmRegister(event) {
            // 提交表单
            const formData = new FormData();
            formData.append("uid", {{ uid }}) ;
            formData.append("birthday", this.birthday) ;
            formData.append("nickname", this.nickname) ;
            formData.append("name", this.name) ;
            formData.append("gender", this.gender) ;
            axios.post("/register2", formData).then(ret=> {
                if (ret.data.code === 200) {
                    layer.msg('基本信息保存成功，激活邮件已发送、请注意查查收', {icon: 6, time: 2000}, () => {
                        window.location.href = "/success?n=" + ret.data.nickname;
                    });
                }else {
                    layer.msg(ret.data.message, {icon: 5});
                }
            })
        }
    },
    computed: {
        isUpload() {
            return this.file.avatar !== null;
        }
    }
}).mount("#main")

</script>
</body>

</html>